'use client';

import React from 'react';
import Title from '../Title';
import Box from './Box';
import a from './a.svg';
import b from './b.svg';
import c from './c.svg';
import { Space } from 'antd';
import { useStatisticsData } from '../../hooks/useStatisticsData';
import styles from '../../pages.module.scss';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

const CustomerStatistics: React.FC = () => {
	const { data } = useStatisticsData();

	return (
		<Space
			style={{
				padding: px2vw(24) + ' ' + px2vw(12) + ' ' + px2vw(24) + ' ' + px2vw(24),
				borderRadius: px2vw(16)
			}}
			className={styles.spaceWrap}
			direction="vertical"
			size={12}
		>
			<Title title="出运航司数" />
			<Box
				icon={a.src}
				label="出运航司数"
				value={Number(data?.oceanYearCarrierCount || 0)}
				unit="家"
			/>
		</Space>
	);
};

export default CustomerStatistics;

